import Vue from "vue";
import App from "./App";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import VueRouter from "vue-router";
import store from "./vuex/store";
import Vuex from "vuex";
import routes from "./routes";
import "font-awesome/css/font-awesome.min.css";
import axios from "axios";
import "@/common/js/permission";

//配置axios的全局基本路径
axios.defaults.baseURL = "http://124.70.131.165:8080"; // 项目部署要改的地方
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios;

Vue.use(ElementUI);
Vue.use(VueRouter);
Vue.use(Vuex);

const router = new VueRouter({
  routes,
});

// axios的前置拦截器 (拦截调用后端的请求, 即在发送axios请求之前会执行)
axios.interceptors.request.use(
  (res) => {
    let token = localStorage.getItem("token");
    // 获取用户id和获取用户姓名
    let logininfo = localStorage.getItem("logininfo");
    if(logininfo) {
      logininfo = JSON.parse(localStorage.getItem("logininfo"));
      var userId = logininfo.id;
      var username = logininfo.username;
    }
    // 对中文进行编码 (请求头不能有中文)
    username = encodeURIComponent(username)
    if (token) {
      res.headers["token"] = token;
      res.headers["userId"] = userId;
      res.headers["username"] = username;
    }
    return res;
  },
  (error) => {
    Promise.reject(error);
  }
);

// axios的后置拦截器 (处理后台登录拦截的结果, 即在调用回调函数之前执行)
axios.interceptors.response.use(
  (res) => {
    // 后端响应的是没有登录的信息
    if (false === res.data.success && "toLogin" === res.data.message) {
      // 清除localStorage的数据
      localStorage.removeItem("token");
      localStorage.removeItem("logininfo");
      localStorage.removeItem("permissions");
      localStorage.removeItem("menus");
      router.push({ path: "/login" }); // 相当于转发方式, 不能用this
      // this.$router.push({ path: '/echarts' }); // 相当于重定向方式
    }
    return res;
  },
  (error) => {
    Promise.reject(error);
  }
);

// 路由的前端拦截器 (拦截不到后端的请求, 即不请求后端, 不发生axios异步请求, 只是路由直接的跳转)
router.beforeEach((to, from, next) => {
  // 如果访问登录页面
  if (to.path == "/login") {
    next(); // 放行
  } else {
    // 其他页面都需要判断你是否登录过
    // 获取localStorage的登录信息
    // 有风险: redis有30分钟, localStorage一直存在, 注销的时候一定要删除localStorage的数据
    let token = localStorage.getItem("token");
    if (token) {
      next(); // 登录过放行
    } else {
      next({ path: "/login" }); // 跳转到login, 登录页面
    }
  }
});

// 处理页面刷新动态路由失效问题
initIndexRouters();
function initIndexRouters() {
  if (!localStorage.menus) {
    return;
  }
  // 防止重复配置路由: 4就是main.js中路由的个数, 如果你的静态路由是6个这里要写成6
  if (router.options.routes.length > 4) {
    return;
  }
  let menus = localStorage.getItem("menus");
  menus = JSON.parse(menus);
  let tempRouters = [];
  menus.forEach((menu) => {
    let indexRouter = {
      path: "/",
      iconCls: menu.icon,
      name: menu.name,
      component: (resolve) => require(["@/views/Home"], resolve),
      children: [],
    };
    menu.children.forEach((cMenu) => {
      let cr = {
        path: cMenu.url,
        name: cMenu.name,
        component: (resolve) =>
          require(["@/views/" + cMenu.component], resolve),
      };
      indexRouter.children.push(cr);
    });
    tempRouters.push(indexRouter);
    router.options.routes.push(indexRouter);
  });
  // 动态路由配置
  router.addRoutes(tempRouters);
}

new Vue({
  router,
  store,
  render: (h) => h(App), // index.html id为app的div标签下面使用<App/>和template: '<App/>',一样的效果
}).$mount("#app"); // 和el: '#app'效果一样都是挂载在index.html id为app的div标签上面
